import { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { List } from 'antd';
import 'antd/dist/antd.css';
import { changeInputAction, addItemAction, delItemAction } from './store/actionCreator';

// 无状态组件(优化性能)
const ReduxList = props => {
    const { value, list, changeInput, addClick, delItem } = props;
    return (
        <Fragment>
            <div>
                <label htmlFor="input">输入内容</label>
                <input id="input" type="text" value={value} onChange={changeInput} />
                <button onClick={addClick} className="btn">
                    提交
                </button>
            </div>
            <List bordered dataSource={list} renderItem={(item, index) => <List.Item onClick={delItem(index)}> {item} </List.Item>} style={{ width: '300px', margin: '10px' }} />
        </Fragment>
    );
};

// class ReduxList extends Component {
//     render() {
//         const { value, list, changeInput, addClick, delItem } = this.props;
//         return (
//             <Fragment>
//                 <div>
//                     <label htmlFor="input">输入内容</label>
//                     <input id="input" type="text" value={value} onChange={changeInput} />
//                     <button onClick={addClick} className="btn">
//                         提交
//                     </button>
//                 </div>
//                 <List bordered dataSource={list} renderItem={(item, index) => <List.Item onClick={delItem(index)}> {item} </List.Item>} style={{ width: '300px', margin: '10px' }} />
//             </Fragment>
//         );
//     }
// }

// 把state数据映射到props中
// 这样在jsx中就可以用this.props.value来代替this.state.value获取值
const mapStateToProps = state => {
    return {
        value: state.value,
        list: state.list,
    };
};

// 把store.disptch()挂载到props上
// 这样在jsx中就可以用this.props.changeInput来代替store.disptch()改变store里的数据
const mapDispatchToProps = disptch => {
    return {
        changeInput(e) {
            disptch(changeInputAction(e.target.value));
        },
        addClick() {
            disptch(addItemAction());
        },
        delItem(index) {
            console.log(index);
            // disptch(delItemAction(index));
        },
    };
};

// ReduxList是UI组件，VisibleList 就是由 React-Redux 通过connect方法自动生成的容器组件。
const VisibleList = connect(mapStateToProps, mapDispatchToProps)(ReduxList);

export default VisibleList;
